html {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}

$line-width: 2px;
$line-length: 5vh;
$duration: 2s;
$easing: ease-in-out;
$body-bg: #111;
$line-color: #ff2d00;

@keyframes mandala-rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(1turn);
  }
}
@keyframes line-rotate {
  0%,
  25% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(180deg);
  }
}
@keyframes reverse-line-rotate {
  0%,
  25% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-180deg);
  }
}
@keyframes circle-rotate {
  0%,
  25% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-22.5deg);
  }
}
@keyframes reverse-circle-rotate {
  0%,
  25% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(22.5deg);
  }
}
@keyframes hue-rotate {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}

body {
  width: 100vw;
  height: 100vh;
  background-color: $body-bg;
  overflow: hidden;
  animation: hue-rotate 30s infinite linear;
}

.mandala {
  position: absolute;
  width: 0;
  height: 0;
  top: 50%;
  left: 50%;
  animation: mandala-rotate 120s infinite linear;
  .circle {
    position: absolute;
    top: 0;
    left: 0;
    .line {
      position: absolute;
      top: 0;
      left: 0;
      transform-origin: calc($line-width / 2) 0;
      &_body {
        width: $line-width;
        height: $line-length;
        background-color: $line-color;
      }
    }
    &-0 {
      .line {
        @for $i from 1 through 4 {
          &:nth-of-type(#{$i}) {
            transform: rotate($i * 90deg);
          }
        }
      }
    }
    &-8 {
      .line_body {
        background: linear-gradient(
          0deg,
          rgba($line-color, 0),
          rgba($line-color, 1) 80%
        );
      }
    }
    @each $index, $lines in (1, 16), (2, 16), (3, 32), (4, 32), (5, 64), (6, 64),
      (7, 128), (8, 128)
    {
      &-#{$index} {
        .line {
          @for $line from 1 through $lines {
            &:nth-of-type(#{$line}) {
              transform: rotate(calc(360deg / $lines * $line))
                translateY($line-length * ($index * 0.9));
            }
          }
        }
        @if $index == 1 {
          animation: reverse-circle-rotate $duration infinite $easing;
          .line_body {
            animation: line-rotate $duration infinite $easing;
          }
          .line:nth-child(odd) .line_body {
            animation: reverse-line-rotate $duration infinite $easing;
          }
        } @else if $index == 3 {
          animation: circle-rotate $duration 0.5s infinite $easing;
          .line_body {
            animation: line-rotate $duration 0.5s infinite $easing;
          }
          .line:nth-child(odd) .line_body {
            animation: reverse-line-rotate $duration 0.5s infinite $easing;
          }
        } @else if $index == 5 {
          animation: reverse-circle-rotate $duration 1s infinite $easing;
          .line_body {
            animation: line-rotate $duration 1s infinite $easing;
          }
          .line:nth-child(odd) .line_body {
            animation: reverse-line-rotate $duration 1s infinite $easing;
          }
        } @else if $index == 7 {
          animation: circle-rotate $duration 1.5s infinite $easing;
          .line_body {
            animation: line-rotate $duration 1.5s infinite $easing;
          }
          .line:nth-child(odd) .line_body {
            animation: reverse-line-rotate $duration 1.5s infinite $easing;
          }
        }
      }
    }
  }
}
